<template>
  <Headerbar />
  <div class="forum">
    <div class="left">
      <div class="ask">
        <n-button type="primary" class="ask-btn" @click="createHelp">
          发布学术求助
        </n-button>
      </div>
      <div class="sort">
        <!-- <div
          :class="{
            'sort-block': true,
            'sort-active': Number(props.type) == 0,
          }"
          @click="changeType(0)"
        >
          <n-icon> <Comment12Regular></Comment12Regular></n-icon>
          &nbsp;&nbsp;所有求助
        </div>
        <div
          :class="{
            'sort-block': true,
            'sort-active': Number(props.type) == index + 1,
          }"
          v-for="(type, index) in types"
          :key="type.key"
          @click="changeType(type.key)"
        >
          <n-icon> <Comment12Regular></Comment12Regular> </n-icon>&nbsp;&nbsp;
          {{ type.label }}
        </div> -->
        <n-popover
          width="trigger"
          trigger="manual"
          :show="showPopover"
          @clickoutside="showPopover = false"
          placement="bottom"
        >
          <template #trigger>
            <n-menu
              :options="types"
              @update:value="changeType"
              :default-value="0"
            >
            </n-menu>
          </template>
          <n-space vertical>
            <n-input
              v-model:value="tmpType"
              placeholder="请输入自定义标签"
            ></n-input>
            <n-space justify="space-between">
              <n-button size="small" @click="showPopover = false"
                >取消</n-button
              >
              <n-button size="small" @click="confirmType" type="primary"
                >确认</n-button
              >
            </n-space>
          </n-space>
        </n-popover>
      </div>
    </div>
    <div class="right">
      <div class="question">
        <n-space justify="space-between" align="center" class="question-head">
          <n-statistic
            :label="
              props.type == 0
                ? '学术求助已解决/总计'
                : getTypeTag(props.type) + '类求助已解决/总计'
            "
          >
            <span style="color: rgb(44, 102, 72); font-size: 0.95em">{{
              solvedCount
            }}</span>
            <template #suffix>
              <span style="color: rgb(44, 88, 102)"> / {{ totalCount }} </span>
            </template>
          </n-statistic>
          <div v-if="route.query.content">
            <n-text type="error">{{ '“' + route.query.content + '”' }}</n-text
            ><span>的搜索结果</span>
          </div>
          <n-input-group>
            <n-select
              v-model:value="sortType"
              :options="sortOptions"
              :consistent-menu-width="false"
              @update:value="sortList"
            >
            </n-select>
          </n-input-group>
        </n-space>
        <div v-if="listLoading">
          <n-skeleton
            height="160px"
            width="100%"
            :sharp="false"
            class="mt-4"
          ></n-skeleton>
          <n-skeleton
            height="160px"
            width="100%"
            :sharp="false"
            class="mt-4"
          ></n-skeleton>
          <n-skeleton
            height="160px"
            width="100%"
            :sharp="false"
            class="mt-4"
          ></n-skeleton>
        </div>
        <div v-else-if="questionList.length > 0">
          <div v-for="item in questionList" :key="item.id">
            <ForumCard :item="item"></ForumCard>
          </div>
          <n-space justify="center" style="margin-top: 5px">
            <n-pagination
              v-model:page="pageIndex"
              v-model:page-count="pageCount"
              @update:page="getList"
            />
          </n-space>
        </div>
        <div v-else>
          <n-result
            status="404"
            title="暂无学术求助"
            description="你可以点击上方发布按钮发布相关求助"
          >
            <template #footer>
              <n-button @click="router.push('/forum/list/0')"
                >逛逛其他</n-button
              >
            </template>
          </n-result>
        </div>
        <n-back-top :right="100" />
      </div>
    </div>
    <img
      src="@/assets/bg/cheese-02.png"
      class="fixed right-0 bottom-0 -z-10 w-[466px] h-[285px]"
    />
  </div>
</template>

<script setup>
import { Comment12Regular } from '@vicons/fluent'
import { NIcon } from 'naive-ui'
import ForumCard from './components/ForumCard.vue'
import api from '@/api/api'
const { Help } = api

const router = useRouter()
const route = useRoute()

const props = defineProps({
  type: {
    type: String
  } //0 全部；1 问答；2 论文；3 专利；4 项目
})

onMounted(() => {
  getList()
})

// 分页
const pageCount = ref(10)
const pageIndex = ref(1)
const getList = () => {
  listLoading.value = true
  Help.getList({
    type: getTypeTag(props.type),
    sortType: sortType.value,
    pageIndex: pageIndex.value,
    content: route.query.content ? route.query.content : ''
  }).then((res) => {
    listLoading.value = false
    if (res.success) {
      // 回到页面顶部
      window.scrollTo(0, 0)
      questionList.value = res.data.questionList
      solvedCount.value = res.data.solvedCount
      totalCount.value = res.data.totalCount
      pageCount.value = res.data.pageCount
      pageIndex.value = res.data.pageIndex
    }
  })
}

// 获取type的标签对应字段
const getTypeTag = (type) => {
  switch (type) {
    case '0':
      return ''
    case '1':
      return '问答'
    case '2':
      return '求文献'
    case '3':
      return '项目'
    case '4':
      return tmpType.value
  }
}
const tmpType = ref('')

//确认自定义标签
const confirmType = () => {
  showPopover.value = false
  pageIndex.value = 1
  router.push('/forum/list/4')
}

const listLoading = ref(true)
//学术求助列表
const questionList = ref([
  // {
  //   id: 1,
  //   title: 'What does the @ mean inside an import path?',
  //   avatar: '',
  //   createTime: '2021-11-11 8:00',
  //   replyTime: '2021-11-11 16:12',
  //   content:
  //     "'m starting out a new vue.js project so I used the vue-cli tool to scaffold out a new webpack project (i.e. vue init webpack). … As I was walking through the generated files I noticed the following imports in the src/router/index.js file: import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello",
  //   image: '',
  //   answerCount: 43,
  //   viewCount: 223,
  //   likeCount: 3,
  //   liked: false,
  //   solved: false
  // },
])
//已解决数量
const solvedCount = ref('∞')
//总数
const totalCount = ref('∞')

//左侧栏类型
function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) })
}
const types = ref([
  { key: 0, label: '所有求助', icon: renderIcon(Comment12Regular) },
  { key: 1, label: '问答', icon: renderIcon(Comment12Regular) },
  { key: 2, label: '文献', icon: renderIcon(Comment12Regular) },
  { key: 3, label: '项目', icon: renderIcon(Comment12Regular) },
  {
    key: 4,
    label: '其他',
    icon: renderIcon(Comment12Regular)
  }
])
// 显示其他
const showPopover = ref(false)

// 点击左侧栏
const changeType = (key) => {
  if (key === 4) {
    showPopover.value = true
    return
  }
  router.push('/forum/list/' + String(key))
  pageIndex.value = 1
}
watch(
  [
    () => {
      return props.type
    },
    () => {
      return route.query.content
    }
  ],
  () => {
    setTimeout(() => {
      getList()
    })
  }
)
// 发布学术求助
const createHelp = () => {
  window.open('/forum/create/0')
}

// 筛选
const sortOptions = [
  { value: 0, label: '最近回复' },
  { value: 1, label: '最新' },
  { value: 2, label: '最热' },
  { value: 3, label: '关注' }
]
const sortType = ref(0) //0 按回复最新排序；1 按发布新到旧排序；2 按热度排序；3 我关注的
const sortList = () => {
  pageIndex.value = 1
  setTimeout(() => {
    getList()
  })
}
</script>

<style scoped lang="scss">
.forum {
  display: flex;
  justify-content: center;
  font-size: 15px;
  width: 85vw;
  padding: 0 7vw;
}
.left {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 1vh;
  padding: 20px 0;
  width: 270px;
  height: 70vh;
  color: rgb(83, 83, 83);
  font-size: 13px;

  .ask-btn {
    width: 100%;
    margin-bottom: 10px;
  }
  .sort-block {
    padding: 10px 5px;
    cursor: pointer;
    transition: 0.25s all;
    &:hover {
      background-color: #f7f9ff;
    }
  }
  .sort-active {
    background-color: #f7f9ff;
  }
}

.right {
  padding: 5px 20px 20px;
  width: 100%;
  font-size: 1.2em;
  .question {
    .question-head {
      width: 100%;
      box-sizing: border-box;
      padding: 1.5vh 1em 0.5vh;
    }
    .n-divider {
      margin: 3px 0 6px;
    }
  }
}
</style>
